<template>
    <div >
      <fieldset>
        <h3 style="text-align: center">商户注册</h3>
      <el-form  :model="ruleForm2"  :rules="rules2" ref="ruleForm2" class="formm" label-width="auto">
        <el-form-item label="联系人姓名" prop="username">
          <el-input type="text" v-model="ruleForm2.username"class="input_width"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input type="text" v-model="ruleForm2.mobile" class="input_width"></el-input>
        </el-form-item>
        <!--图形验证码-->
        <!--<el-form-item prop="imgcode" label="图形验证码">
          <el-input
            v-model="ruleForm2.imgcode"
            auto-complete="off"
            placeholder="图形验证码"
            style="width: 280px"
            @keyup.enter.native="getPhoneCode"
          >
            <svg-icon  slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
          </el-input>
          <div class="login-code">
            <img :src="codeUrl" @click="getCode" class="login-code-img"/>
          </div>
        </el-form-item>-->
        <!-- 手机验证码 -->
        <el-form-item label="手机验证码" prop="code">
          <el-input  v-model="ruleForm2.code" placeholder="请输入6位验证码" maxlength="6" show-word-limit  style="width: 280px"></el-input>
          <el-button type="success" :disabled="this.info" @click="sendSmsCode">{{button_sms_value}}</el-button>
        </el-form-item>
        <el-form-item label="请输入密码" prop="password">
          <el-input type="password" v-model="ruleForm2.password" class="input_width"></el-input>
        </el-form-item>
        <el-form-item label="请再次输入密码" prop="checkPassword">
          <el-input type="password" v-model="ruleForm2.checkPassword" class="input_width"></el-input>
        </el-form-item>
        <el-form-item label="请选择类型" prop="type">
          <el-radio v-model="ruleForm2.type" label="2">个人职业房东</el-radio>
          <el-radio v-model="ruleForm2.type" label="1">公司化公寓</el-radio>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="input_width" @click="toRegister('ruleForm2')">注册</el-button>
        </el-form-item>

      </el-form>
      </fieldset>
    </div>

</template>

<script>
  import {getSmsCode,register } from "@/api/system/business";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import { getCodeImg } from "@/api/login";
    export default {
        name: "register",
        data() {

          var validatePass = (rule, value, callback) => {
            if (value === '') {
              callback(new Error('请输入密码'));
            } else {
              if (this.ruleForm2.checkPassword !== '') {
                this.$refs.ruleForm2.validateField('checkPassword');
              }
              callback();
            }
          };
          var validatePass2 = (rule, value, callback) => {
            if (value === '') {
              callback(new Error('请再次输入密码'));
            } else if (value !== this.ruleForm2.password) {
              callback(new Error('两次输入密码不一致!'));
            } else {
              callback();
            }
          };
          return {
            codeUrl:'',
            button_sms_type :'error',
            button_sms_value:'获取验证码',
            button_sms_disable:false,
            sms_time_count:120,
            sms_timer:null,
            info:false,
            ruleForm2: {
              username:'',
              code:'',
              checkPassword: '',
              mobile: '',
              password: '',
              type:'',
            },
            rules2: {
              username: [
                { required: true, message: '请输入联系人姓名', trigger: 'blur' },
              ],
              mobile: [
                { required: true, message: '请输入手机号', trigger: 'blur' },
              ],
              code: [
                { required: true, message: '请输入手机验证码', trigger: 'blur' },
              ],
             /* imgcode: [
                { required: true, message: '请输入图形验证码', trigger: 'blur' },
              ],*/
              password: [
                { required: true, message: '请输入密码', trigger: 'blur' },
              ],
              type: [
                { required: true, message: '请选择类型', trigger: 'change' },
              ],
              checkPassword: [
                { validator: validatePass2, trigger: 'blur' }
              ],

            }
          };
        },
      created() {
        this.getCode();
      },
        methods: {
          getCode() {
            getCodeImg().then(res => {
              this.codeUrl = "data:image/gif;base64," + res.img;
              this.loginForm.uuid = res.uuid;
            });
          },
          getPhoneCode(){

          },
          test() {
            this.$router.replace("/update");
          },
          toRegister(formName) {
            this.$refs[formName].validate((valid) => {
              if (valid) {
                //注册
                alert(this.ruleForm2.type)
                //var parse = JSON.stringify(this.ruleForm2);
                register(this.ruleForm2).then(res=>{
                  console.log(res)
                  this.$message({type:"success",message:res.msg})
                if (this.ruleForm2.type==2){
                  //个人补全信息
                  this.$router.push({path:"/update",params:{id:res.data}})
                }else{
                  //公司补全
                  this.$router.push({path:"/update2",params:{id:res.data}})
                }
                }).catch(function (error) {
                  this.$message({type:"error",message:res.msg})
                })
              } else {
                console.log('error submit!!');
                return false;
              }
            });
          },
          resetForm(formName) {
            this.$refs[formName].resetFields();
          },
          sms_count_down() {
            // 验证码倒计时
            if (!this.sms_timer) {
              this.count = this.sms_time_count
              //验证码发送成功，倒计时
              this.button_sms_type = 'info'
              this.button_sms_disable = true
              this.button_sms_value = "已发送(" + this.count + ")"
              //第一种缩写写法
              this.sms_timer = setInterval(() => {
                if (this.count > 0 && this.count <= this.sms_time_count) {
                  this.count--

                  this.button_sms_value = "已发送(" + this.count + ")"
                  this.info=true
                  console.log(this.count)
                } else {
                  clearInterval(this.sms_timer)
                  this.sms_timer = null
                  console.log('倒计时结束')
                  this.info=false
                  this.button_sms_type = 'success'
                  this.button_sms_disable = false
                  this.button_sms_value = '验证码'
                }
              }, 1000)
            }
          },
          sendSmsCode() {
            // 手机号为空，警告提示
            if(this.ruleForm2.mobile === ''){
              this.$message({
                message: '发送手机号不能为空',
                type: 'warning'
              });
              return
            }
            let mobile_mode=/^1[34578]\d{9}$/;
            if(!mobile_mode.test(this.ruleForm2.mobile)){
              this.$message({
                message: '手机号码错误',
                type: 'warning'
              });
              return
            }
            // 发送本地springboot请求,本机的地址：192.168.3.12
            const _this = this;
            getSmsCode(this.ruleForm2.mobile).then(res=>{
              this.$message({type:"success",message:res.msg})
              this.sms_count_down()
            }).catch(function (error) {
             this.$message({type:"error",duration:60000,message:res.msg})
            })
        },
          }
        }
</script>

<style scoped>
  fieldset {
    /* 表单页面居中，宽度50% ,legend颜色设置，legend圆角*/
    border:2px solid #DCDFE6;  text-align:left; border-radius: 8px;margin: 0 auto;width:40%;
  }
  .input_width{
    width: 390px;
  }
  .formm{

  }
  .login-code {
    margin-right: 90px;
    height: 38px;
    float: right;
  img {
    cursor: pointer;
    vertical-align: middle;
  }
  }
  .login-code-img{
    height: 38px;
  }

</style>
